<template>
  <div>
    <header-tilte :title="title"></header-tilte>
    <loading v-if="isShowLoading"></loading>
    <div class="flex_center" v-if="!isShowLoading">
      <div class="bodyContent">
      <div class="flex white_bac">
        <img src="./img/tongzhuangshui.png">
        <div class="flex flex_column flex_around">
          <p class="text_left">水桶押金：<span class="font-weight" style="color: rgb(240, 20, 20)">￥{{depositDetail.bucket_cash}}</span></p>
          <p class="text_left"> 押金数量：<span class="font-weight" style="color: rgb(106, 194, 11)">{{depositDetail.cash_bucket}}个</span></p>
        </div>
      </div>
      <div class="flex white_bac" style="margin-top: 0.5rem">
        <img src="./img/yinshuiji.png">
        <div class="flex flex_column flex_around">
          <p class="text_left">水机押金：<span class="font-weight" style="color: rgb(240, 20, 20)">￥{{depositDetail.water_dispenser_cash}}</span></p>
          <p class="text_left">饮水机数：<span class="font-weight" style="color: rgb(106, 194, 11)">{{depositDetail.water_dispenser}}个</span></p>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>

    import HeaderTilte from "../../components/headerTilte";
    import Loading from "../../components/loading";
    export default {
      data(){
        return {
          title: '账户中心-押金',
          depositDetail:{
            bucket_cash:0,
            cash_bucket:0,
            water_dispenser_cash:0,
            water_dispenser:0
          },
          isShowLoading:true
        }
      },
      mounted(){
        this.checkLogin();
        this.memberDeposit();
      },
      methods:{
        memberDeposit(){
          this.yesS.memberDeposit(
            this.$comParams()
          ).then(res => {
            if(res.data.info){
              this.depositDetail = res.data.info;
            }
            this.isShowLoading = false

          })
        }
      },
      components: {
        Loading,
        HeaderTilte},
      name: "cash"
    }
</script>

<style scoped>

</style>
